import React from 'react';
import {NavLink, useRoutes} from "react-router-dom";
// Routes, Route,Navigate
// import About2 from "./pages/About2";
// import Home from "./pages/Home";
import routes from './routes'

export default function App() {

    const element = useRoutes(routes)

    function computedClassName({isActive}) {
        return isActive ? 'list-group-item activeCeshi' : 'list-group-item'
    }

    return (
        <div>
            <div className="row">
                <div className="col-xs-offset-2 col-xs-8">
                    <div className="page-header"><h2>React Router Demo</h2></div>
                </div>
            </div>
            <div className="row">
                <div className="col-xs-2 col-xs-offset-2">
                    <div className="list-group">
                        <NavLink className={computedClassName} to='/About'>About</NavLink>
                        <NavLink className={computedClassName} to='/Home'>Home</NavLink>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/*<Routes>*/}
                            {/*    <Route path='/About' element={<About2/>}/>*/}
                            {/*    <Route path='/Home' element={<Home/>}/>*/}
                            {/*    <Route path='/' element={<Navigate to='/About'/>}/>*/}
                            {/*</Routes>*/}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}